<template>
	<view class="conten" >
		  <view class="image-container">
		        <image src="/static/loginbg.png" class="background-image"></image>
		        <text class="overlay-text">萌蚤同城</text>
				<text class="overlay-text-en">Mengzaotengcheng</text>
		    </view>
			<view style="background-color: #F3F4F6; width: 100%;height: 100%;">
				<view style="background-color: #FFFFFF; height: 25px;border-radius: 12px;padding: 20px;margin: 0 20px 20px 20px;">
					<u-input
						    placeholder="用户名"
						    prefixIcon="/static/me.png"
							fontSize="16px"
							border="none"
							v-model="text"
						    prefixIconStyle="font-size: 18px;color: #999999;padding-right:5px"
						></u-input>
				</view>
				<view style="background-color: #FFFFFF; height: 25px;border-radius: 12px;padding: 20px;margin: 0 20px 20px 20px;">
					<u-input
						    placeholder="密码"
						    prefixIcon="/static/pas.png"
							fontSize="16px"
							type="password"
							v-model="value"
							border="none"
						    prefixIconStyle="font-size: 18px;color: #999999;padding-right:5px"
						></u-input>
				</view>
				<view style="height: 25px;border-radius: 12px;padding: 20px;margin: 0 20px 20px 20px;">
				<u-button class="custom-style"  type="success" shape="circle" size="large" text="登录" @click="login"></u-button>
				</view>
			</view>
			
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				text:'',
				value:"",
				bgImage:'/static/loginbg.png',
			}
		},
		onLoad(e) {
			
		
		
		},
		onHide() {
		},
		mounted() {},
		methods: {
			//登录
			 login(){
				 
			 } 
			     
		}
	}
</script>

<style lang="scss" scoped>
	.conten {
		width: 100%;
		height: 100vh;
		//position: relative;
		position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		
		  z-index: 0; /* 确保背景在最底层 */
	}
	.image-container {
	    position: relative;
	    width: 100%;
	    height: 50vh;
	}
.background-image {
    width: 100%;
    height: 100%;
    display: block;
}
.overlay-text {
    position: absolute;
    top: 60%;
    left: 30%;
    transform: translateX(-50%);
    color: #000000;
    font-weight: bold;
    font-size: 32px;
}
	.overlay-text-en {
	    position: absolute;
	     top: calc(60% + 2.5rem);
	    left: 30%;
	    transform: translateX(-50%);
	    color: #000000;
	    font-weight: bold;
	    font-size: 12px;
	}
</style>